<script setup lang="ts">
  import { ref } from 'vue'
  import { checkLogin, picturePreview } from '@/utils/tools'
  import {getPublicNowList, postLike } from '@/api/training'
  import { onLoad } from '@dcloudio/uni-app'
  import { chartAndTxt, getPublicImgList } from '@/api'
  // #ifndef H5
  const { top, bottom, height } = uni.getMenuButtonBoundingClientRect()
  const headerHeight = (top as number) + (bottom as number) + (height as number)
  // #endif
  // #ifdef H5
  const height = 40
  const headerHeight = 60
  // #endif
  const pictureList = ref([])
  const PreviewList = ref([])
  const paging = ref()
  const uWaterfallRef = ref()
  const categoryId = ref(undefined)
  const tranFilter = ref([])
  const campOpen = ref(false)
  onLoad(() => {
    getPublicImgList().then(res => {
      const data = JSON.parse(JSON.stringify(res.data))
      data.map((item:any,index:number) => {
        if(index == 0){
          item.active = true
          categoryId.value = item.id
        }else{
          item.active = false
        }
        return item
      })
      tranFilter.value = data
      uWaterfallRef.value.clear()
      paging.value.reload()
    })
  })
  const loadFun = (pageNo:number, pageSize:number) => {
    getPublicNowList({pageNo,pageSize,categoryId:categoryId.value}).then(res => {
      if(pageNo == 1){
        PreviewList.value = []
      }
      if(res.code == 200){
        const pictureImgData = JSON.parse(JSON.stringify(res.data.data)).map((item:any) => {
          item.fileAddress = JSON.parse(item.fileAddress)
          PreviewList.value.push(item.fileAddress[0].fullUrl)
          return item
        })
        paging.value.complete(pictureImgData)
      }else{
        paging.value.complete([])
      }
    }).catch(err => {
      paging.value.complete(false)
    })
  }

  const likeClick = (data:any) => {
    checkLogin().then(res => {
      postLike({imgId:data.id}).then(res => {
        if(res.data){
          if(data.isLikes){
            data.numberLikes--
          }else{
            data.numberLikes++
          }
          data.isLikes = !data.isLikes
        }
      })
    })
  }
  const filterClick = (data:any) => {
    tranFilter.value.map((item:any) => {
      item.active = false
      return item
    })
    data.active = true
    categoryId.value = data.id
    uWaterfallRef.value.clear()
    paging.value.reload()
  }

  const statusBarHeight = uni.getSystemInfoSync().statusBarHeight
</script>

<template>
  <z-paging ref="paging" class="z-paging" :auto="false" v-model="pictureList" @query="loadFun">
    <template #top>
      <!--      <xx-title title="图文直播"/>-->
      <view style="background: linear-gradient(180deg, #EFF7E8 0%, #FFFFFF 100%);">
        <view class="header" :style="{height:`${headerHeight + 20}rpx`}">
          <image mode="heightFix" :style="{marginTop:`${statusBarHeight}px`,height:`36rpx`,paddingLeft:'28rpx'}"  :src="`${$Prefix}/public/images/smallImage/live-title.png`"/>
        </view>
        <scroll-view class="train-list" :scroll-x="true">
          <view class="train-list-item" @click="filterClick(item)" :class="{active:item.active}" v-for="item in tranFilter" :key="item.id">
            {{item.name}}
          </view>
        </scroll-view>
      </view>
    </template>
    <up-waterfall ref="uWaterfallRef" v-model="pictureList">
      <template v-slot:left="{leftList}">
        <view v-for="(item, index) in leftList" :key="index" class="warter-item warter-left">
          <view class="image-header">
            <up-lazy-load
              @click="picturePreview(item.fileAddress[0].fullUrl, PreviewList)"
              :image="item.fileAddress[0].full_thumb_url"
              :loadingImg="`${$Prefix}/public/images/smallImage/image-loading.png`"
              :errorImg="`${$Prefix}/public/images/smallImage/image_error.png`"></up-lazy-load>
            <view class="like-icon" @click.stop="likeClick(item)">
              <up-icon :name="item.isLikes ? 'heart-fill' : 'heart'" :color="item.isLikes ? 'red' : '#ffffff'" size="18"></up-icon>
            </view>
          </view>
          <view class="bottom-text">
            <view class="bottom-left">
              {{item.createdTime}}
            </view>
            <view class="bottom-right" @click.stop="likeClick(item)">
              <up-icon :name="item.isLikes ? 'thumb-up-fill':'thumb-up'" :color="item.isLikes ? 'red' : '#505363'" size="18"></up-icon>
              {{ item.numberLikes ? item.numberLikes : 0 }}
            </view>
          </view>
        </view>
      </template>
      <template v-slot:right="{rightList}">
        <view v-for="(item, index) in rightList" :key="index" class="warter-item warter-right">
          <view class="image-header">
            <up-lazy-load
              @click="picturePreview(item.fileAddress[0].fullUrl, PreviewList)"
              :image="item.fileAddress[0].full_thumb_url"
              :loadingImg="`${$Prefix}/public/images/smallImage/image-loading.png`"
              :errorImg="`${$Prefix}/public/images/smallImage/image_error.png`"></up-lazy-load>
            <view class="like-icon" @click.stop="likeClick(item)">
              <up-icon :name="item.isLikes ? 'heart-fill' : 'heart'" :color="item.isLikes ? 'red' : '#ffffff'" size="18"></up-icon>
            </view>
          </view>
          <view class="bottom-text">
            <view class="bottom-left">
              {{item.createdTime}}
            </view>
            <view class="bottom-right" @click.stop="likeClick(item)">
              <up-icon :name="item.isLikes ? 'thumb-up-fill':'thumb-up'" :color="item.isLikes ? 'red' : '#505363'" size="18"></up-icon>
              {{ item.numberLikes ? item.numberLikes : 0 }}
            </view>
          </view>
        </view>
      </template>
    </up-waterfall>
  </z-paging>
</template>

<style scoped lang="scss">
  ::v-deep .z-paging-content{
    background-color: #F5F5F5;
  }
  ::v-deep .uni-mask{
    background-color: transparent !important;
  }
  .warter-left{
    margin:0 12rpx 24rpx 0;
  }
  .warter-right{
    margin:0 0 24rpx 12rpx;
  }
  .warter-item{
    background: #FFFFFF;
    border-radius: 16rpx;
    overflow: hidden;
    box-sizing: border-box;
    &:first-child{
      margin-top: 24rpx;
    }
    .image-header{
      position: relative;
      .image-time{
        position: absolute;
        width: 100%;
        bottom: 0;
        left: 0;
        background-color: rgba(0,0,0,.5);
        color: #FFFFFF;
        padding:8rpx 12rpx;
        font-size: 24rpx;
      }
      .like-icon{
        position: absolute;
        top: 16rpx;
        right: 16rpx;
        padding: 8rpx;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 100rpx;
      }
    }
    .bottom-text{
      padding: 16rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #505363;
      font-size: 24rpx;
      .bottom-right{
        display: flex;
        align-items: center;
      }
    }
  }

  .train-list{
    padding: 20rpx 10rpx;
    box-sizing: border-box;
    white-space: nowrap;
    //background-color: #ffffff;
    .train-list-item{
      padding: 6rpx 24rpx;
      background: #F6F6F6;
      margin-right: 10rpx;
      border-radius: 100rpx;
      font-weight: 500;
      color:#505363;
      display: inline-block;
      font-size: 28rpx;
      margin-bottom: 10rpx;
      &:last-child{
        margin-right: 0;
      }
      &.active{
        color: #7B9462;
        border:1rpx solid #7B9462;
        background: #EDF4E6;
      }
    }
  }
  .header{
    display: flex;
    align-items: center;
    .train-title{
      padding-left: 10rpx;
    }
  }
</style>
